<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/16
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    String static_path = path + "/static/alpha";
%>
<html>
<head>
    <title>员工添加</title>
    <link rel="stylesheet" href="<%=static_path%>/dist/css/diyUpload.css">
    <link rel="stylesheet" href="<%=static_path%>/dist/css/webuploader.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<%=static_path%>/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="<%=static_path%>/plugins/select2/select2.min.css">

</head>
<body>

<div class="wrapper">
    <!-- 文件头 -->
    <jsp:include page="/manage/inc/head"></jsp:include>

    <!-- 侧边栏 -->
    <jsp:include page="/manage/inc/sidebar"></jsp:include>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>添加员工</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">
                                <a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item active">General Form</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div style="margin-left: 200px;" class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-6">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">员工信息</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" id="addStaff" action="<%=path%>/manage/addStaff/add" method="post">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">员工姓名</label>
                                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" name="name">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">密码：</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">工号：</label>
                                        <input type="text" class="form-control" id="jobNum" placeholder="工号" name="jobNum"><span></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">手机号：</label>
                                        <input type="text" class="form-control" id="phone" placeholder="手机号" name="phone">
                                        <span></span>
                                    </div>
                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">Email</label>
                                        <div class="form-group">
                                            <input type="email" class="form-control" id="inputEmail" placeholder="Email" name="mail">
                                            <span></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">身份证号：</label>
                                        <input type="text" class="form-control" id="IDnumber" placeholder="身份证号" name="idNum">
                                        <span></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">居住地址</label>
                                        <input type="text" class="form-control" id="addr" placeholder="地址" name="addr">
                                    </div>
                                    <div class="form-group">
                                        <label>性别</label><br />
                                        <input type="radio" name="sex" value="男"/>男
                                        <input type="radio" name="sex" value="女"/>女
                                    </div>


                                    <div class="form-group">
                                        <label>在职状态</label><br />
                                        <input type="radio" name="status" checked="checked"  value="1"/>在职
                                        <input type="radio" name="status" value="0" />不在职
                                    </div>
                                    <div class="form-group">
                                        <label>是否人事</label><br />
                                        <input type="radio" name="isHr"   value="0"/>是
                                        <input type="radio" name="isHr" checked="checked" value="1" />否
                                    </div>
                                    <div class="input-group input-group-lg mb-3">
                                        <div class="input-group-prepend">
                                          <%--  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                                部门
                                            </button>
                                            <ul class="dropdown-menu">
                                                <c:forEach items="${requestScope.dm}" var="dmt">
                                                <li class="dropdown-item">
                                                    <p id="dm${dmt.id}">${dmt.departmentName}</p>
                                                </li>
                                                </c:forEach>
                                            </ul>--%>
                                              <select name="dt.id" id="dt" class="btn btn-warning dropdown-toggle"data-toggle="dropdown" >
                                                  <option  value="">部门</option>
                                                  <c:forEach items="${requestScope.dm}" var="dmt">
                                                  <option  value="${dmt.id}">${dmt.departmentName}</option>
                                                  </c:forEach>
                                              </select>
                                        </div>

                                        <!-- /btn-group -->
                                        <input  id="leaderId" name="leaderId" type="hidden">
                                        <input id="dmm" class="form-control" style="width: 70%;"></input>

                                    </div>
                                    <div class="form-group">
                                        <label>职务类型</label>
                                        <select class="form-control" style="width: 100%;" name="postId">
                                            <c:forEach items="${requestScope.posts}" var="post">
                                                <option ${post.postType=="软件开发"?"selected":""} value="${post.id}">${post.postType}</option>
                                            </c:forEach>

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>是否免考勤</label><br />
                                        <input type="radio" name="isClocking" value="1"/>是

                                        <input type="radio" name="isClocking" checked="checked" value="0" />否
                                    </div>
                                    <div class="form-group">
                                        <label>合同状态</label><br />
                                        <input type="radio" name="contractStatus" checked="checked" value="0" />执行
                                        <input type="radio" name="contractStatus" value="1" />到期
                                        <input type="radio" name="contractStatus" value="2" />未执行

                                    </div>
                                    <div class="form-group">
                                        <label>合同类型</label>
                                        <select name="contractTypeId" class="form-control" style="width: 100%;">
                                        <c:forEach items="${requestScope.ct}" var="ctx">
                                            <option  value="${ctx.id}">${ctx.title}</option>
                                        </c:forEach>

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>合同时间</label>

                                        <div class="input-group">
                                            <div class="input-group-prepend">
														<span class="input-group-text">
								                        <i class="fa fa-calendar"></i>
								                      </span>
                                            </div>
                                            <input type="text" class="form-control float-right" id="reservation" name="time">
                                        </div>
                                        <!-- /.input group -->
                                    </div>
                                    <!--文件上传-->
                                    <input  id="p" name="userPic" type="hidden">
                                    <iframe id="iframe" style="border: 0px;" src="<%=path %>/manage/addStaff/addPic" >

                                    </iframe>


                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button id="sb" type="button" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="float-right d-none d-sm-block">
            <b>Version</b> 3.0.0-alpha
        </div>
        <strong>Copyright &copy; 2014-2018 <a href="#">AdminLTE.io</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="<%=static_path%>/plugins/jquery/jquery.min.js"></script>

<!-- Bootstrap 4 -->
<script src="<%=static_path%>/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->

<!-- Select2 -->
<script src="<%=static_path%>/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.js"></script>
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="<%=static_path%>/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="<%=static_path%>/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="<%=static_path%>/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="<%=static_path%>/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="<%=static_path%>/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="<%=static_path%>/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="<%=static_path%>/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="<%=static_path%>/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<%=static_path%>/dist/js/demo.js"></script>
<script src="<%=static_path%>/plugins/wjsc/diyUpload.js"></script>
<script src="<%=static_path%>/plugins/wjsc/webuploader.html5only.min.js"></script>
<script>

    //////////////////////////////////////////////////////////////////////////////////////
    $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('yyyy-MM-dd', {//yyyy
            'placeholder': 'yyyy-MM-dd'
        })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('yyyy-MM-dd', {
            'placeholder': 'yyyy-MM-dd'
        })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date range picker
        $('#reservation').daterangepicker()
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            format: 'YYYY/MM/DD h:mm A'
        })
        //Date range as a button
        $('#daterange-btn').daterangepicker({
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                startDate: moment().subtract(29, 'days'),
                endDate: moment()
            },
            function(start, end) {
                $('#reportrange span').html(start.format('YYYY,MMMM ,D,') + ' - ' + end.format('YYYY,MMMM ,D,'))
            }
        )

        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        })
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red'
        })
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        })
        //Colorpicker
        $('.my-colorpicker1').colorpicker()
        //color picker with addon
        $('.my-colorpicker2').colorpicker()

        //Timepicker
        $('.timepicker').timepicker({
            showInputs: false
        })
    })

    $(document).ready(function() {
        $("#jobNum").blur(checkSz);
        $("#phone").blur(checkPhone);
        $("#IDnumber").blur(checkIDnumber);
        $("#inputEmail").blur(chenckInputEmail);

    })
    /*表单验证只能输入数字*/
    function checkSz() {
        var obj = $("#jobNum").val();
        var reg = /^[0-9]+$/;
        if(obj != "" && !reg.test(obj)) {
            $(this).next().html("只能填写数字").css("color", "red");
            var obj = $("#jobNum").val("");
            return false;
        } else {
            $(this).next().html("");
        }
    }
    /*表单验证手机号*/
    function checkPhone() {
        var obj = $("#phone").val();
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if(obj.length == 0 || obj.length != 11 || !myreg.test(obj)) {
            $(this).next().html("请填写正确的手机号").css("color", "red");
            return false;
        } else {
            $(this).next().html("");
        }
    }
    /*表单验证邮箱*/
    function chenckInputEmail() {
        var obj = $("#inputEmail").val();

        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if(!myreg.test(obj)) {
            $(this).next().html("请填写正确的邮箱").css("color", "red");
            return false;
        } else {
            $(this).next().html("");
        }
    }

    /*表单验证身份证号*/
    function checkIDnumber() {
        var obj = $("#IDnumber").val();
        var myreg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if(!myreg.test(obj)) {
            $(this).next().html("请填写正确的身份证号").css("color", "red");
            return false;
        } else {
            $(this).next().html("");
        }
    }

    $(function() {//点击获得部门经理
        $("#dt").change(function (){
            var id=$("#dt").val();
            if (id=="") {
                $("#leaderId").val("");
                $("#dmm").val("");
            }
            else {
                $.ajax({
                    url: "<%=path%>/manage/addStaff/getDepartmentManager",
                    /*type:"post",*/
                    async: false,
                    //dataType : 'json',
                    data: {"id": id},
                    success: function (mes) {
                        var a = [];
                        a = mes.split(",");
                        $("#leaderId").val(a[1]);
                        $("#dmm").val(a[0]);
                    }
                });
            }
        });
    })
    $(function (){//提交表单
        $("#sb").click(function (){
            alert("提交成功！")
            $("#addStaff").submit();
        })

    })
</script>

</body>
</html>
